<template>
  <view class="avatarsList allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="头像编辑" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="list mt-65">
      <view v-for="(item,index) in avatarsList" :key="index" class="allRowCenter" @click="selectAvatarIndex = index">
        <image-avater :width="100" :height="100" :src="item.img" :border-width="4" isOrder
                      :border-color="selectAvatarIndex == index ? '#FF4206' : '#f5f5f5'"></image-avater>
      </view>
    </view>
    <view class="upload allRowCenter mt-163" @click="uploadAvatar">
      <text class="upload_text">上传</text>
    </view>
    <view class="confirm allRowCenter mt-48" @click="confirmAvatar">
      <text class="confirm_text">确定</text>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {getConfigFamilyImage, getPortraitList, updateMemberImage, uploadGroupImage} from "../../api/shiqinAPI";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";

export default {
  components: {ImageAvater, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      selectAvatarIndex: -1,
      // 头像列表
      avatarsList: [],
      options: {}
    };
  },
  onLoad(options) {
    this.options = options
  },
  onReady() {
    this.getConfigFamilyImage()
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 获取头像列表
    getConfigFamilyImage() {
      getPortraitList().then(res => {
        this.avatarsList = res.data.res
      })
    },
    uploadAvatar() {
      this.$util.uploadImageChange({count: 1, url: 'upload/image'}, (async res => {
        let {status, msg} = await updateMemberImage({
          member_id: this.options.member_id,
          avatar: res.data.url
        })
        if (status == '200') {
          uni.showToast({
            title: '上传成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
        }
      }))
    },
    async confirmAvatar() {
      if (this.selectAvatarIndex == -1) {
        uni.showToast({
          title: '请选择头像',
          icon: 'none'
        })
        return
      }
      let {status, msg} = await updateMemberImage({
        member_id: this.options.member_id,
        avatar: this.avatarsList[this.selectAvatarIndex].img
      })
      if (status == '200') {
        uni.showToast({
          title: '上传成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.avatarsList {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .list {
    width: 702rpx;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 36rpx;
  }

  .upload {
    width: 362rpx;
    height: 80rpx;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
    border: 1rpx solid #FF4206;

    .upload_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FF4206;
    }
  }

  .confirm {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .confirm_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
